<template>
	<view class="pb130 bf">
		<view class="f-bt f-y-c bf p2">
			<view class="f-g-1">
				<u-input placeholder="请输入规格名称" v-model="queryForm.keyword" @change="fetchData" prefixIcon="search"
					shape="circle" prefixIconStyle="font-size: 22px;color: #666;margin-right:10rpx;padding-left:10px"
					placeholderStyle="color:#666" customStyle="background:#f8f8f8;padding:15rpx 5rpx;" border="none"
					clearable>
				</u-input>
			</view>
		</view>
		<view class="uni-container mt10">
			<uni-table ref="table" border stripe emptyText="暂无数据">
				<uni-tr>
					<uni-th align="center">排序</uni-th>
					<uni-th align="center">规格名称</uni-th>
					<uni-th align="center" width="350">规格值</uni-th>
					<uni-th align="center">描述</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in list" :key="i">
					<uni-td align="center">{{ row.sort }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ row.name }}</view>
					</uni-td>
					<uni-td align="center">
						<view class="flex">
							<div class="f12 c6 tags">
								<text v-for="(v, i) in row.value" :key="i">
									<text v-if="i < 4">{{ v.name }}</text>
								</text>
							</div>
						</view>
					</uni-td>
					<uni-td align="center">
						<view>{{ row.desc }}</view>
					</uni-td>
					<uni-td align="center">
						<text class="cf06 mr10" @click.stop="handEdit(row)">编辑</text>
						<text class="cf06 mr10" @click.stop="handDel(row)">删除</text>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="queryForm.pageSize"
					:current="queryForm.pageNo" :total="total" @change="change" /></view>
		</view>
		<view class="buts bf5">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}" @click="handAdd">新增规格
				</view>
			</view>
		</view>
		<addWindow ref="addWindow" @save="fetchData"></addWindow>
	</view>
</template>

<script>
	import addWindow from "./components/addGG.vue"
	export default {
		name: 'flsz',
		components: {
			addWindow,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				queryForm: {
					keyword: "",
					pageNo: 1,
					pageSize: 10,
				},
				list: [],
				total:0,
			}
		},
		onLoad() {
			this.fetchData()
		},
		computed: {},
		methods: {
			async fetchData(type) {
				this.status = 'loading'
				let {
					data: {
						list,
						pageNo,
						pageSize,
						total
					},
				} = await this.beg.request({
					url: `${this.api.specList}`,
					data: this.queryForm,
				})
				this.total = total
				this.queryForm.pageNo = pageNo
				this.queryForm.pageSize = pageSize
				this.list = list ? list : []
				// if (type != 'nextPage' || this.queryForm.pageNo == 1) {
				// 	this.list = list
				// } else {
				// 	if (list.length == 0) {
				// 		this.status = 'nomore'
				// 		return
				// 	}
				// 	this.list = this.list.concat(list)
				// }
				// this.status = 'loadmore'
			},
			change(e) {
				this.queryForm.pageNo = e.current;
				this.fetchData()
			},
			handDel(v) {
				uni.showModal({
					title: '温馨提示',
					content: '你确定要删除当前项吗',
					success: async (res) => {
						if (res.confirm) {
							let {
								msg
							} = await this.beg.request({
								url: `${this.api.specList}/${v.id}`,
								method: "DELETE",
							})
							this.fetchData()
							uni.$u.toast(msg)
						}
					}
				});
			},
			handEdit(row) {
				this.$refs['addWindow'].open(row)
			},
			handAdd() {
				this.$refs['addWindow'].open()
			}
		},
	}
</script>
<style scoped lang="scss">
	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.tags {
	  width: 100%;
	  height: 25px;
	  max-width: 280px;
	  padding-right: 18px;
	  box-sizing: border-box;
	
	  & > text {
	    display: inline-block;
	    margin-right: 10px;
	    padding: 1px 8px;
	    border-radius: 2px;
	    color: #666;
	    background: #f4f6f8;
	    text-align: center;
	    line-height: 17px;
	  }
	}
</style>